<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理 - 资产管理系统</title>
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        :root {
            --primary-color: #4e73df;
            --secondary-color: #f8f9fa;
            --dark-color: #343a40;
            --success-color: #28a745;
            --warning-color: #ffc107;
            --danger-color: #dc3545;
            --info-color: #17a2b8;
            --light-color: #f8f9fa;
            --muted-color: #6c757d;
        }

        body {
            background-color: #f8f9fc;
            font-family: 'Inter', system-ui, sans-serif;
            font-size: 14px;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .navbar {
            box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
            padding: 0.5rem 0;
            background-color: var(--primary-color);
            transition: background-color 0.3s ease;
            width: 100%;
        }

        .navbar:hover {
            background-color: #4367d6;
        }

        .navbar-brand {
            font-weight: 600;
            font-size: 1.35rem;
            letter-spacing: 0.5px;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .container {
            width: 85%;
            max-width: 85%;
            padding-top: 1rem;
            padding-bottom: 1.5rem;
            flex: 1;
            margin: 0 auto;
        }

        .user-table-container {
            width: 800px;
            margin: 0 auto;
        }

        @media (max-width: 768px) {
            .user-table-container {
                width: 100%;
                padding: 0 15px;
            }
        }
        
        .card {
            border: 1px solid #e3e6f0;
            border-radius: 0.5rem;
            box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.1);
            margin-bottom: 1.5rem;
        }

        .card-header {
            background-color: #f8f9fc;
            border-bottom: 1px solid #e3e6f0;
            font-weight: 600;
            padding: 0.75rem 1.25rem;
        }

        .card-body {
            padding: 1.25rem;
        }

        h2 {
            color: var(--dark-color);
            margin: 1rem 0 1rem 0;
            font-size: 1.4rem;
            font-weight: 600;
        }

        .form-control, .form-select {
            padding: 0.375rem 0.75rem;
            border: 1px solid #d1d3e2;
            border-radius: 0.35rem;
            font-size: 13px;
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        }

        .form-control:focus, .form-select:focus {
            border-color: #bac8f3;
            outline: 0;
            box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
        }

        .btn-primary {
            background-color: var(--primary-color);
            border: none;
            padding: 0.5rem 1rem;
            font-weight: 600;
            font-size: 13px;
            transition: all 0.2s;
        }

        .btn-primary:hover {
            background-color: #3a5bc7;
        }

        .btn-danger {
            background-color: var(--danger-color);
            border: none;
            padding: 0.5rem 1rem;
            font-weight: 600;
            font-size: 13px;
            transition: all 0.2s;
        }

        .btn-danger:hover {
            background-color: #c82333;
        }

        .btn-animated {
            position: relative;
            overflow: hidden;
        }

        .btn-animated:after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 5px;
            height: 5px;
            background: rgba(255, 255, 255, 0.3);
            opacity: 0;
            border-radius: 100%;
            transform: scale(1, 1) translate(-50%);
            transform-origin: 50% 50%;
        }

        .btn-animated:active:after {
            animation: ripple 0.6s ease-out;
        }

        @keyframes ripple {
            0% {
                transform: scale(0, 0);
                opacity: 0.5;
            }
            100% {
                transform: scale(20, 20);
                opacity: 0;
            }
        }

        .table {
            border-radius: 0.5rem;
            overflow: hidden;
            box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.1);
        }

        .table th {
            background-color: #f8f9fc;
            border-bottom-width: 1px;
            font-weight: 600;
            color: #5a5c69;
            padding: 0.75rem 1rem;
        }

        .table td {
            padding: 0.75rem 1rem;
            vertical-align: middle;
        }

        .badge {
            font-weight: 500;
            padding: 0.35em 0.65em;
            font-size: 12px;
        }

        .nav-link {
            position: relative;
            overflow: hidden;
            padding: 0.5rem 1rem;
            border-radius: 0.25rem;
            transition: all 0.2s ease;
        }

        .nav-link:not(.active):after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background-color: white;
            transition: width 0.3s ease;
            border-radius: 2px;
        }

        .nav-link:not(.active):hover:after {
            width: 100%;
        }

        .nav-link.active {
            background-color: rgba(255, 255, 255, 0.1);
        }

        .navbar-brand svg {
            transition: transform 0.3s ease;
        }

        .navbar-brand:hover svg {
            transform: scale(1.1);
        }

        .btn-outline-light {
            border-width: 1.5px;
        }

        footer {
            background-color: white;
            border-top: 1px solid #e3e6f0;
            padding: 1rem 0;
            margin-top: auto;
            width: 100%;
        }

        .footer-links {
            display: flex;
            gap: 1rem;
        }

        .footer-links a {
            color: var(--muted-color);
            transition: color 0.2s ease;
        }

        .footer-links a:hover {
            color: var(--primary-color);
            text-decoration: none;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .container {
                width: 95%;
                max-width: 95%;
                padding-left: 15px;
                padding-right: 15px;
            }
        }

        @media (max-width: 576px) {
            .container {
                width: 100%;
                max-width: 100%;
            }
        }
        
        /* 统一按钮大小 */
        .action-btn {
            padding: 0.375rem 0.75rem;
            font-size: 12px;
            min-width: 70px;
        }
        
        .btn-disabled {
            opacity: 0.65;
            cursor: not-allowed;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark">
        <div class="container py-2">
            <!-- 品牌标识 -->
            <a class="navbar-brand" href="#">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M4 6H20V20H4V6Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M4 10H20" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M8 6V2" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M16 6V2" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                资产管理系统
            </a>
            
            <!-- 移动端菜单按钮 -->
            <button class="navbar-toggler py-1" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                    style="border-color: rgba(255,255,255,0.3);">
                <span class="navbar-toggler-icon"></span>
            </button>
            
            <!-- 菜单内容 -->
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto align-items-center gap-1">
                    <li class="nav-item">
                        <a class="nav-link" href="/dashboard">
                            <i class="fa fa-dashboard mr-1"></i> 首页
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/report">
                            <i class="fa fa-plus-circle mr-1"></i> 上报资产
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="/admin/users">
                            <i class="fa fa-users mr-1"></i> 用户管理
                        </a>
                    </li>
                </ul>
                
                <div class="d-flex align-items-center">
                    <a href="/logout" class="btn btn-outline-light btn-sm rounded-pill px-4 py-1.5">
                        <i class="fa fa-sign-out mr-1"></i> 退出
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <div class="user-table-container">
        <h2><i class="fa fa-users mr-2"></i>用户管理</h2>
        
        <div class="card mb-3">
            <div class="card-header"><i class="fa fa-user-plus mr-2"></i>添加新用户</div>
            <div class="card-body">
                <form id="addUserForm" class="row g-2">
                    <div class="col-md-3">
                        <input type="text" class="form-control" id="newUsername" placeholder="用户名" required>
                    </div>
                    <div class="col-md-3">
                        <input type="password" class="form-control" id="newPassword" placeholder="密码" required>
                    </div>
                    <div class="col-md-3">
                        <select class="form-select" id="newRole" required>
                            <option value="user">普通用户</option>
                            <option value="admin">管理员</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <button type="submit" class="btn btn-primary w-100 btn-animated">
                            <i class="fa fa-plus mr-1"></i>添加
                        </button>
                    </div>
                </form>
            </div>
        </div>
        
        <div class="card">
            <div class="card-body p-0">
                <table class="table table-striped table-hover mb-0">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>用户名</th>
                            <th>角色</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="usersTable">
                        <!-- 用户数据将通过JavaScript动态加载 -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade" id="editUserModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fa fa-edit mr-2"></i>编辑用户</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="editUserForm">
                        <input type="hidden" id="editUserId">
                        <div class="mb-3">
                            <label for="editUsername" class="form-label">用户名</label>
                            <input type="text" class="form-control" id="editUsername" placeholder="用户名" required>
                        </div>
                        <div class="mb-3">
                            <label for="editPassword" class="form-label">新密码</label>
                            <input type="password" class="form-control" id="editPassword" placeholder="新密码 (留空不修改)">
                        </div>
                        <div class="mb-3">
                            <label for="editRole" class="form-label">角色</label>
                            <select class="form-select" id="editRole" required>
                                <option value="user">普通用户</option>
                                <option value="admin">管理员</option>
                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary btn-animated" id="saveEditUser">
                        <i class="fa fa-save mr-1"></i>保存
                    </button>
                </div>
            </div>
        </div>
    </div>

    <footer class="mt-auto py-3">
        <div class="container">
            <div class="d-flex flex-column flex-md-row justify-content-between align-items-center">
                <p class="text-sm text-muted mb-2 mb-md-0">© 2025 资产管理系统. TIMI开发.</p>
                <div class="footer-links">
                    <a href="#" class="text-muted">
                        <i class="fa fa-question-circle mr-1"></i> 帮助中心
                    </a>
                    <a href="#" class="text-muted">
                        <i class="fa fa-file-text-o mr-1"></i> 使用手册
                    </a>
                    <a href="#" class="text-muted">
                        <i class="fa fa-envelope-o mr-1"></i> 联系我们
                    </a>
                </div>
            </div>
        </div>
    </footer>

    <script src="/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script>
        const editUserModal = new bootstrap.Modal('#editUserModal');

        function loadUsers() {
            fetch('/api/users')
                .then(response => response.json())
                .then(users => {
                    const tableBody = document.getElementById('usersTable');
                    tableBody.innerHTML = users.map(user => `
                        <tr>
                            <td>${user.id}</td>
                            <td>${user.username}</td>
                            <td><span class="badge ${user.role === 'admin' ? 'bg-danger' : 'bg-primary'}">
                                ${user.role === 'admin' ? '管理员' : '普通用户'}
                            </span></td>
                            <td>${new Date(user.created_at).toLocaleString()}</td>
                            <td>
                                <button class="btn btn-sm btn-primary action-btn edit-btn btn-animated" data-id="${user.id}">
                                    <i class="fa fa-edit mr-1"></i>编辑
                                </button>
                                <button class="btn btn-sm btn-danger action-btn delete-btn btn-animated" 
                                    data-id="${user.id}"
                                    ${user.username === 'admin' ? 'disabled' : ''}>
                                    <i class="fa fa-trash mr-1"></i>删除
                                </button>
                            </td>
                        </tr>
                    `).join('');
                    
                    // 为编辑按钮添加事件监听
                    document.querySelectorAll('.edit-btn').forEach(btn => {
                        btn.addEventListener('click', () => editUser(btn.getAttribute('data-id')));
                    });
                    
                    // 为删除按钮添加事件监听
                    document.querySelectorAll('.delete-btn:not([disabled])').forEach(btn => {
                        btn.addEventListener('click', () => deleteUser(btn.getAttribute('data-id')));
                    });
                })
                .catch(error => {
                    alert('加载用户失败: ' + error.message);
                    window.location.href = '/dashboard';
                });
        }
        
        document.getElementById('addUserForm').addEventListener('submit', function(e) {
            e.preventDefault();
            const username = document.getElementById('newUsername').value.trim();
            const password = document.getElementById('newPassword').value;
            const role = document.getElementById('newRole').value;
            
            if (username === 'admin') {
                alert('不能创建admin用户');
                return;
            }
            
            fetch('/api/users', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({ username, password, role })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    loadUsers();
                    document.getElementById('addUserForm').reset();
                } else {
                    alert(data.message || '添加用户失败');
                }
            })
            .catch(error => alert('添加用户失败: ' + error.message));
        });
        
        function deleteUser(userId) {
            // 获取要删除的用户名
            const username = document.querySelector(`.delete-btn[data-id="${userId}"]`).closest('tr').querySelector('td:nth-child(2)').textContent;
            
            if (username === 'admin') {
                alert('不能删除admin用户');
                return;
            }
            
            if (!confirm(`确定要删除用户 "${username}" 吗？此操作不可恢复！`)) {
                return;
            }

            fetch(`/api/users/${userId}`, {
                method: 'DELETE',
                headers: {'Content-Type': 'application/json'}
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('删除失败，服务器返回错误');
                }
                return response.json();
            })
            .then(data => {
                if (data.success) {
                    loadUsers();
                } else {
                    alert(data.message || '删除用户失败');
                }
            })
            .catch(error => {
                alert('删除用户失败: ' + error.message);
            });
        }

        function editUser(userId) {
            fetch(`/api/users/${userId}`)
                .then(response => response.json())
                .then(user => {
                    document.getElementById('editUserId').value = user.id;
                    document.getElementById('editUsername').value = user.username;
                    document.getElementById('editRole').value = user.role;
                    
                    // 如果是admin用户，禁用用户名和角色编辑
                    if (user.username === 'admin') {
                        document.getElementById('editUsername').disabled = true;
                        document.getElementById('editRole').disabled = true;
                    } else {
                        document.getElementById('editUsername').disabled = false;
                        document.getElementById('editRole').disabled = false;
                    }
                    
                    editUserModal.show();
                })
                .catch(error => alert('获取用户信息失败: ' + error.message));
        }
        
        document.getElementById('saveEditUser').addEventListener('click', function() {
            const userId = document.getElementById('editUserId').value;
            const username = document.getElementById('editUsername').value.trim();
            const password = document.getElementById('editPassword').value;
            const role = document.getElementById('editRole').value;
            
            fetch(`/api/users/${userId}`, {
                method: 'PUT',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({ username, password, role })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    editUserModal.hide();
                    loadUsers();
                } else {
                    alert(data.message || '更新用户失败');
                }
            })
            .catch(error => alert('更新用户失败: ' + error.message));
        });
        
        document.addEventListener('DOMContentLoaded', loadUsers);
    </script>
</body>
</html>